<template>
  <div class="mz-three-menu">
    <Menu theme="primary" @on-select="handleSelect" style="width: 100%">
      <Submenu :name="JSON.stringify(item)" v-for="(item, index) in menuList" v-show="!item.hidden && item.count > 0" :key="index">
        <template slot="title">{{ item.name }}（{{item.count}}）</template>
        <div v-if="item.list && item.list.length >= 1">
          <template  v-for="item1 in item.list">
            <template v-if="item1.list && item1.list.length >= 1">
              <Submenu :name="JSON.stringify(item1)" :key="item1.type_id" v-show="!item1.hidden">
                <template slot="title">{{item1.name}}（{{item1.count}}）
                </template>
                <MenuItem :name="JSON.stringify(item2)" v-for="item2 in item1.list" v-show="!item2.hidden"
                          :key="item2.type_id" :class="item2.audit_state_yingshang == '1' ? 'mz-gray' : ''" >{{item2.name}}
                </MenuItem>
              </Submenu>
            </template>
            <MenuItem :name="JSON.stringify(item1)" v-else :key="item1.type_id" v-show="!item1.hidden"
                      :class="item1.audit_state_yingshang == '1' ? 'mz-gray' : ''">{{item1.name}}
            </MenuItem>
          </template>
        </div>
      </Submenu>
    </Menu>
  </div>
</template>
<script>
export default {
  name: 'three-menu',
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', evil(name))
    },
    getMenuId (q, name) {
      return q + name
    },
    showTitle (item) {
      return item
    },
    showlist (item) {
      return item.list && (item.list.length > 0)
    },
    getNameOrHref (item, list0) {
      return item.href ? `isTurnByHref_${item.href}` : (list0 ? item.list[0].name : item.name)
    }
  }
}
</script>

<style>
  .mz-three-menu .ivu-menu-item-group-title {
    color: #f3f3f3;
  }

  .mz-three-menu .ivu-menu {
    color: #f3f3f3;
  }

  .mz-three-menu .ivu-menu-submenu-title:hover {
    color: #f3f3f3;
    font-weight: bold;
  }

  .mz-three-menu .ivu-menu-item:hover {
    color: #f3f3f3;
    font-weight: bold;
  }
  .mz-three-menu .mz-gray {
    color: darkgray;
  }
  .mz-three-menu .mz-gray:hover {
    color: darkgray;
    font-weight: bold;
  }
</style>
